<template>
    <lay-card width="1200" style="height: 800px">
      <lay-row space="20">
        <lay-col md="24">
          <lay-quote size="sm">
            <h1 slot="title">反洗钱指标用例生成</h1>
          </lay-quote>
        </lay-col>
      </lay-row>
      <lay-row space="20">
        <lay-col md="1"></lay-col>
        <lay-col md="18">
          <lay-form :model="formData" ref="layFormRef4" :rules="rules" required>
            <lay-form-item label="类型" prop="type">
              <lay-select
                  v-model="operate"
                  placeholder="请选择类型"
                  allow-clear
              >
                <lay-select-option
                  v-for="unit in params"
                  :key="unit.value"
                  :value="unit.value"
                  :label="unit.name"
                ></lay-select-option>
              </lay-select>
            </lay-form-item>
            <lay-form-item label="大模型类型" prop="model" >
            <lay-select v-model="formData.model" placeholder="请选择大模型类型" allow-clear>
              <lay-select-option value="Qwen3-Coder-480B-A35B-Instruct" label="Qwen3"></lay-select-option>
              <lay-select-option value="DeepSeek-V3" label="DeepSeek-V3"></lay-select-option>
              <lay-select-option value="DeepSeek-R1" label="DeepSeek-R1"></lay-select-option>
            </lay-select>
            </lay-form-item>
            <lay-form-item label="个人账号" prop="account">
              <lay-input v-model="formData.account" allow-clear placeholder="请输入域账号"></lay-input>
            </lay-form-item>
            <lay-form-item label="用例路径" prop="nodePath">
              <lay-input v-model="formData.nodePath" allow-clear placeholder="请拷贝blade测试用例节点的路径进行粘贴"></lay-input>
            </lay-form-item>
            <lay-form-item label="是否增强生成模式" prop="isEnhancedMode">
              <lay-checkbox v-model="formData.isEnhancedMode" label="是"></lay-checkbox>
            </lay-form-item>
            <lay-form-item label="风险指标编号" v-if="operate === 1">
              <lay-textarea v-model="formData.factorCode" allow-clear placeholder="请输入风险指标编号，多个代码以；分割"></lay-textarea>
            </lay-form-item>
            <lay-form-item label="属性编号" v-if="operate === 2">
              <lay-textarea v-model="formData.attributeCode" allow-clear placeholder="请输入属性编号，多个代码以；分割"></lay-textarea>
            </lay-form-item> 
            <lay-form-item style="text-align: center;">
              <lay-button type="primary" @click="handleSubmit">提交</lay-button>
            </lay-form-item>
            <lay-form-item label="转化进度">
                <div style="height: 20px"></div>
                <lay-progress
                    show-text="转化进度"
                    :percent="progress"
                ></lay-progress>
            </lay-form-item>
          </lay-form>
        </lay-col>
      </lay-row>
    </lay-card>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue';
import {
  indicatorByCode, attributeByCode,
  queryProgressApi
} from '../../../api/fastApi/AiCase';
import {notify} from "../../../untils/tip";

interface FormData {
  type: number;
  model: string;
  account: string;
  nodePath: string;
  factorCode: string;
  attributeCode: string;
  isEnhancedMode: boolean;
}

const operate = ref(1);
const progress = ref(0);
const taskId = ref('');
const countInsert = ref(0);
const params = ref([{value: 1, name: '指标编码'}, {value: 2, name: '属性编码'}])
const timerInsert = ref();

// 表单数据
const formData = ref<FormData>({
  type: 1,
  model: '',
  account: '',
  nodePath: '',
  factorCode: '',
  attributeCode: '',
  isEnhancedMode: false
});

// 表单校验规则（可选）
const rules = reactive({
  project: [
    { required: true, message: '请选择类型', trigger: 'change' }
  ],
  modelType: [
    { required: true, message: '请选择大模型类型', trigger: 'change' }
  ],
  account: [
    { required: true, message: '请输入域账号', trigger: 'blur' }
  ],
  nodePath: [
    { required: true, message: '请粘贴用例路径', trigger: 'blur' }
  ]
});

// 声明 layFormRef4
const layFormRef4 = ref();

const queryProgress = async () => {
    let {code, data, success} = await queryProgressApi({taskId: taskId.value});
    if(success === true){
       progress.value = Number(data);
       console.log('current progress : ', progress.value);
       if(Number(data) >= 100){
          clearInterval(timerInsert.value);
          notify("success", '用例转换＆上传完成！')
       }
    }
    countInsert.value ++;
    if(countInsert.value > 600){
      clearInterval(timerInsert.value);
      notify("failed", "超时退出！")
    }
}

// 提交表单的处理函数
const handleSubmit = async () => {
  try {
    // 🔥 主动触发表单校验
    const valid = await layFormRef4.value.validate();
    if (!valid) {
      notify('failed', '请检查表单内容');
      return;
    }

    let response;
    switch (operate.value) {
      case 1:
        response = await indicatorByCode(formData.value);
        break;
      case 2:
        response = await attributeByCode(formData.value);
        break;

      default:
        response = reactive({success: false, data: '操作类型错误！'});
    }
    if(response.success === false) {
      notify('failed', '用例转换生成失败！');
    }
    if(response.success === true) {
      progress.value = Number(response.data);
      taskId.value = response.data;
      notify('success', '用例转换生成中，请等待...');
      countInsert.value = 0;
      timerInsert.value = setInterval(queryProgress, 3000)
      console.log('提交成功:', response.data);
    }else {
      notify('failed', '用例转换生成失败！');
    }
  } catch (error) {
    console.error('提交失败:', error);
    notify('failed', '用例转换生成失败！'+error);
  }
};
</script>

<style scoped>

</style>